<template>
  <div :class="computedClasses" class="material-input__component">
    <div :class="{ iconClass: icon }">
      <i
        v-if="icon"
        :class="['el-icon-' + icon]"
        class="el-input__icon material-input__icon"
      ></i>
      <input
        v-if="type === 'email'"
        v-model="currentValue"
        :name="name"
        :placeholder="fillPlaceHolder"
        :readonly="readonly"
        :disabled="disabled"
        :autocomplete="autoComplete"
        :required="required"
        type="email"
        class="material-input"
        @focus="handleMdFocus"
        @blur="handleMdBlur"
        @input="handleModelInput"
      />
      <input
        v-if="type === 'url'"
        v-model="currentValue"
        :name="name"
        :placeholder="fillPlaceHolder"
        :readonly="readonly"
        :disabled="disabled"
        :autocomplete="autoComplete"
        :required="required"
        type="url"
        class="material-input"
        @focus="handleMdFocus"
        @blur="handleMdBlur"
        @input="handleModelInput"
      />
      <input
        v-if="type === 'number'"
        v-model="currentValue"
        :name="name"
        :placeholder="fillPlaceHolder"
        :step="step"
        :readonly="readonly"
        :disabled="disabled"
        :autocomplete="autoComplete"
        :max="max"
        :min="min"
        :minlength="minlength"
        :maxlength="maxlength"
        :required="required"
        type="number"
        class="material-input"
        @focus="handleMdFocus"
        @blur="handleMdBlur"
        @input="handleModelInput"
      />
      <input
        v-if="type === 'password'"
        v-model="currentValue"
        :name="name"
        :placeholder="fillPlaceHolder"
        :readonly="readonly"
        :disabled="disabled"
        :autocomplete="autoComplete"
        :max="max"
        :min="min"
        :required="required"
        type="password"
        class="material-input"
        @focus="handleMdFocus"
        @blur="handleMdBlur"
        @input="handleModelInput"
      />
      <input
        v-if="type === 'tel'"
        v-model="currentValue"
        :name="name"
        :placeholder="fillPlaceHolder"
        :readonly="readonly"
        :disabled="disabled"
        :autocomplete="autoComplete"
        :required="required"
        type="tel"
        class="material-input"
        @focus="handleMdFocus"
        @blur="handleMdBlur"
        @input="handleModelInput"
      />
      <input
        v-if="type === 'text'"
        v-model="currentValue"
        :name="name"
        :placeholder="fillPlaceHolder"
        :readonly="readonly"
        :disabled="disabled"
        :autocomplete="autoComplete"
        :minlength="minlength"
        :maxlength="maxlength"
        :required="required"
        type="text"
        class="material-input"
        @focus="handleMdFocus"
        @blur="handleMdBlur"
        @input="handleModelInput"
      />
      <span class="material-input-bar"></span>
      <label class="material-label">
        <slot></slot>
      </label>
    </div>
  </div>
</template>

<script>
// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue

module.exports = {
  name: "MdInput",
  props: {
    /* eslint-disable */
    icon: String,
    name: String,
    type: {
      type: String,
      default: "text",
    },
    value: [String, Number],
    placeholder: String,
    readonly: Boolean,
    disabled: Boolean,
    min: String,
    max: String,
    step: String,
    minlength: Number,
    maxlength: Number,
    required: {
      type: Boolean,
      default: true,
    },
    autoComplete: {
      type: String,
      default: "off",
    },
    validateEvent: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      currentValue: this.value,
      focus: false,
      fillPlaceHolder: null,
    };
  },
  computed: {
    computedClasses() {
      return {
        "material--active": this.focus,
        "material--disabled": this.disabled,
        "material--raised": Boolean(this.focus || this.currentValue), // has value
      };
    },
  },
  watch: {
    value(newValue) {
      this.currentValue = newValue;
    },
  },
  methods: {
    handleModelInput(event) {
      const value = event.target.value;
      this.$emit("input", value);
      if (this.$parent.$options.componentName === "ElFormItem") {
        if (this.validateEvent) {
          this.$parent.$emit("el.form.change", [value]);
        }
      }
      this.$emit("change", value);
    },
    handleMdFocus(event) {
      this.focus = true;
      this.$emit("focus", event);
      if (this.placeholder && this.placeholder !== "") {
        this.fillPlaceHolder = this.placeholder;
      }
    },
    handleMdBlur(event) {
      this.focus = false;
      this.$emit("blur", event);
      this.fillPlaceHolder = null;
      if (this.$parent.$options.componentName === "ElFormItem") {
        if (this.validateEvent) {
          this.$parent.$emit("el.form.blur", [this.currentValue]);
        }
      }
    },
  },
};
</script>

<style scoped>
.material-input__component .material-input-bar:before,
.material-input__component .material-input-bar:after {
  content: "";
  height: 1px;
  width: 0;
  bottom: 0;
  position: absolute;
  transition: 0.2s ease all;
}

.material-input__component {
  margin-top: 36px;
  position: relative;
}

.material-input__component * {
  box-sizing: border-box;
}

.material-input__component .iconClass .material-input__icon {
  position: absolute;
  left: 0;
  line-height: 16px;
  color: #2196f3;
  top: 12px;
  width: 30px;
  height: 16px;
  font-size: 16px;
  font-weight: normal;
  pointer-events: none;
}

.material-input__component .iconClass .material-label {
  left: 30px;
}

.material-input__component .iconClass .material-input {
  text-indent: 30px;
}

.material-input__component .material-input {
  font-size: 16px;
  padding: 12px 12px 2px 6px;
  display: block;
  width: 100%;
  border: none;
  line-height: 1;
  border-radius: 0;
}

.material-input__component .material-input:focus {
  outline: none;
  border: none;
  border-bottom: 1px solid transparent;
}

.material-input__component .material-label {
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 0px;
  top: 0;
  transition: 0.2s ease all;
  font-size: 18px;
}

.material-input__component .material-input-bar {
  position: relative;
  display: block;
  width: 100%;
}

.material-input__component .material-input-bar:before {
  left: 50%;
}

.material-input__component .material-input-bar:after {
  right: 50%;
}

.material-input__component.material--disabled .material-input {
  border-bottom-style: dashed;
}

.material-input__component.material--raised .material-label {
  top: -28px;
  left: 0;
  font-size: 16px;
  font-weight: bold;
}

.material-input__component.material--active .material-input-bar:before,
.material-input__component.material--active .material-input-bar:after {
  width: 50%;
}

.material-input__component {
  background: white;
}

.material-input__component .material-input {
  background: none;
  color: black;
  text-indent: 0px;
  border-bottom: 1px solid #e0e0e0;
}

.material-input__component .material-label {
  color: #9e9e9e;
}

.material-input__component .material-input-bar:before,
.material-input__component .material-input-bar:after {
  background: #2196f3;
}

.material-input__component.material--active .material-label {
  color: #2196f3;
}

.material-input__component.material--has-errors.material--active
  .material-label {
  color: #f44336;
}

.material-input__component.material--has-errors .material-input-bar:before,
.material-input__component.material--has-errors .material-input-bar:after {
  background: transparent;
}
</style>
